<template>
    <div class="sidebar-layout-wrapper">
        <el-container class="layout-container-box">
            <el-header class="layout-header-box"><Header /></el-header>
            <el-container class="main-body-box">
                <el-aside class="layout-sider-box" width="200px"
                    ><Menus
                /></el-aside>
                <el-main class="layout-content-box">
                    <router-view v-slot="{ Component }">
                        <keep-alive>
                            <component
                                :is="Component"
                                v-if="route.meta.isKeepAlive"
                                :key="route.path"
                            />
                        </keep-alive>
                        <component
                            :is="Component"
                            :key="route.path"
                            v-if="!route.meta.isKeepAlive"
                        />
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import Header from "../components/header.vue";
import Menus from "../components/menus.vue";
const route = useRoute();
</script>

<style lang="scss" scoped>
.sidebar-layout-wrapper {
    height: 100%;
    .layout-container-box {
        height: 100%;
    }
    .main-body-box {
        overflow: hidden;
    }
    .layout-header-box {
        margin-bottom: 2px;
        padding: 0 20px;
        background-color: var(--main-body-bg-color);
    }
    .layout-sider-box {
        background-color: var(--main-body-bg-color);
    }
    .layout-content-box {
        margin: 0 0 0 5px;
        padding: 10px 20px;
        box-sizing: border-box;
        border: 1px solid #e8e8e8;
        background-color: #fff;
    }
}
</style>
